<template>
  <div>
    <div class="titleBackgroundColor title-border" :style="{ height:size120,lineHeight:size120 }">
      <div class="n-title-text" :style="{fontSize:size30}">开方购药</div>
  </div>
   <div :style="{height: size160}">
       <div class="prescribingDrugs-title-backgroundColor prescribingDrugs-title-border-right" style="float:left;"  :style="{height: size160, width: size375}" v-on:click="openMySend">
       <div style="float:left;" :style="{marginTop: size60,marginLeft:size65}"><img :src="queren" :style="{width:size45,height:size45}" ></img></div>
       <div style="float:left;" :style="{marginLeft: size45,marginTop: size30}">
         <div :style="{fontSize: size20}">全部方案</div>
         <div style="float:left;font-weight: bold;" :style="{fontSize: size45,marginTop: size15}">14</div>
       </div>
    </div>
    <div class="prescribingDrugs-title-backgroundColor prescribingDrugs-title-border-right" style="float:left;"  :style="{height: size160, width: size375}">
       <div style="float:left;" :style="{marginTop: size60,marginLeft:size65}"><img :src="wode" :style="{width:size45,height:size45}" ></img></div>
       <div style="float:left;" :style="{marginLeft: size45,marginTop: size30}">
         <div :style="{fontSize: size20}">患者购药</div>
         <div style="float:left;font-weight: bold;" :style="{fontSize: size45,marginTop: size15}">0</div>
       </div>
    </div>
   </div>

    <div class="prescribingDrugs-title-backgroundColor" :style="{height: size80, lineHeight: size80, marginTop:size30}" style="font-weight: bold;">
        <div style="float:left;" :style="{marginLeft: size30}">我的常用方</div>
        <div style="float:right;" :style="{marginRight: size30}">></div>
    </div>
    <div :style="{marginTop:size550}">
       <div class="circle color-1r" :style="{fontSize:size20,width:size120,height:size120,marginTop:marginTop19px, marginLeft:size60}">
         <img :src="phone" :style="{width:size65,height:size65, marginTop: size30}"></img>
         <div :style="{marginTop: size30}">拍照开方</div>
     </div>  
    </div>
    
     <div class="circle color-1o" :style="{fontSize:size20,width:size120,height:size120,marginTop:marginTop19px, marginLeft:size375}">
         <img :src="oline" :style="{width:size65,height:size65, marginTop: size30}"></img>
         <div :style="{marginTop: size30}">线上开方</div>
     </div>
  </div>
  
</template>

<script>
export default {
  data () {
    return {
      phone: '../../../static/phone.png',
      oline: '../../../static/oline.png',
      send: '../../../static/send.png',
      get: '../../../static/get.png',
      shigong: '../../../static/shigong.png',
      queren: '../../../static/queren.png',
      wode: '../../../static/wode.png',
      yunshu: '../../../static/yunshu.png'
    }
  },
  mounted () {},
  computed: {
    size10 () {
      return this.clientWidth * 10 / 750 + 'px'
    },
    circleFontSize14 () {
      return this.clientWidth * 14 / 750 + 'px'
    },
    size15 () {
      return this.clientWidth * 15 / 750 + 'px'
    },
    marginTop19px () {
      return this.clientWidth * 19 / 750 + 'px'
    },
    size20 () {
      return this.clientWidth * 20 / 750 + 'px'
    },
    size23 () {
      return this.clientWidth * 23 / 750 + 'px'
    },
    size25 () {
      return this.clientWidth * 25 / 750 + 'px'
    },
    size30 () {
      return this.clientWidth * 30 / 750 + 'px'
    },
    size40 () {
      return this.clientWidth * 40 / 750 + 'px'
    },
    size45 () {
      return this.clientWidth * 45 / 750 + 'px'
    },
    size50 () {
      return this.clientWidth * 50 / 750 + 'px'
    },
    size65 () {
      return this.clientWidth * 65 / 750 + 'px'
    },
    size60 () {
      return this.clientWidth * 60 / 750 + 'px'
    },
    size80 () {
      return this.clientWidth * 80 / 750 + 'px'
    },
    size100 () {
      return this.clientWidth * 100 / 750 + 'px'
    },
    size120 () {
      return this.clientWidth * 120 / 750 + 'px'
    },
    size160 () {
      return this.clientWidth * 160 / 750 + 'px'
    },
    size180 () {
      return this.clientWidth * 180 / 750 + 'px'
    },
    size208 () {
      return this.clientWidth * 208 / 750 + 'px'
    },
    size307 () {
      return this.clientWidth * 307.2 / 750 + 'px'
    },
    size375 () {
      return this.clientWidth * 373 / 750 + 'px'
    },
    size400 () {
      return this.clientWidth * 400 / 750 + 'px'
    },
    size450 () {
      return this.clientWidth * 450 / 750 + 'px'
    },
    size470 () {
      return this.clientWidth * 470 / 750 + 'px'
    },
    size500 () {
      return this.clientWidth * 500 / 750 + 'px'
    },
    size550 () {
      return this.clientWidth * 600 / 750 + 'px'
    },
    size700 () {
      return this.clientWidth * 700 / 750 + 'px'
    }
  },
  methods: {
    openMySend () {
      var router = this.$router
      router.push({path: '/mySend', query: { doctorId: 3 }})
    }
  }
}
</script>

<style>
.prescribingDrugs-title-backgroundColor{
  background-color: #ffffff
}
.prescribingDrugs-title-border-right {
    border-right: solid 0.5px #E0E0E0;
}
.circle {
    float: left;
    text-align: center;
    border-radius: 50%;      
    -moz-border-radius: 50%;     
    -webkit-border-radius: 50%;
}
.color-1r{
  background-color:#A52A2A;
}
.color-1o{
  background-color:orange;
}
</style>
